<template>
    <div class="shop_info">
        <!-- 店铺信息 -->
        <van-form @submit="onSubmit" error-message-align="right" input-align="right" class="shop_form">
            <van-field v-model="name" name="name" label="店铺名称" placeholder="请输入店面或品牌名称"
                :rules="[{ required: true, message: '请输入店面或品牌名称' }]" />
            <van-field v-model="credit_code" name="credit_code" label="社会信用代码" placeholder="请输入社会信用代码"
                :rules="[{ required: true, message: '请输入社会信用代码' }]" />
            <van-field v-model="contacts" name="contacts" label="联系人" placeholder="请输入联系人" />
            <van-field v-model="phone" name="phone" label="联系人手机号" placeholder="请输入联系人手机号" />
            <van-field v-model="email" name="email" label="邮箱" placeholder="请输入邮箱"
                :rules="[{ required: true, message: '请输入邮箱' }, { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确' }]" />
            <!-- :rules="[{ required: true, message: '请输入社会信用代码' }]" -->
            <van-field name="license_url" label="" label-width="4rem" :rules="[{ required: true, message: '不能为空' }]">
                <template #label>
                    <div class="shop_upload_text">
                        <div>上传营业/个体工商户执照</div>
                        <div>保证照片清晰可见</div>
                        <div @click="getExample('merchant_business_license')">查看示例</div>
                    </div>
                </template>
                <template #input>
                    <van-uploader v-model="license_url" :max-count="1" :after-read="afterReadLicense"
                        :before-delete="uploadDleteLicense">
                        <img src="../../../../images/mine/icon_tup.png" alt="" class="shop_upload_img">
                    </van-uploader>
                </template>
            </van-field>
            <!-- :rules="[{ required: true, message: '请输入社会信用代码' }]" :rules="[{ required: true, message: '不能为空' }]"-->
            <!-- <van-field name="qualification_url" label="" label-width="4rem" :rules="[{ required: true, message: '不能为空' }]">
                <template #label>
                    <div class="shop_upload_text">
                        <div>上传经营资质</div>
                        <div>保证照片清晰可见</div>
                        <div @click="getExample('merchant_qualification')">查看示例</div>
                    </div>
                </template>
                <template #input>
                    <van-uploader v-model="qualification_url" :max-count="1" :after-read="afterReadQualification"
                    :before-delete="uploadDleteQualification">
                        <img src="../../../../images/mine/icon_tup.png" alt="" class="shop_upload_img">
                    </van-uploader>
                </template>
            </van-field> -->
            <!-- :rules="[{ required: true, message: '请输入社会信用代码' }]" -->
            <!-- <van-field name="authorization_url" label="" label-width="4rem" :rules="[{ required: true, message: '不能为空' }]">
                <template #label>
                    <div class="shop_upload_text">
                        <div>上传授权书</div>
                        <div>保证照片清晰可见</div>
                        <div @click="getExample('merchant_reckoner_authorization')">查看示例</div>
                    </div>
                </template>
                <template #input>
                    <van-uploader v-model="authorization_url" :max-count="1" :after-read="afterReadAuth"
                    :before-delete="uploadDleteAuth">
                        <img src="../../../../images/mine/icon_tup.png" alt="" class="shop_upload_img">
                    </van-uploader>
                </template>
            </van-field> -->
            <div style="width: 100%;margin-top:1rem">
                <van-button round block type="info" native-type="submit" style="width: 95%;margin: 0.32rem auto;"
                    color="linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%)">下一步</van-button>
            </div>
        </van-form>
        <van-button round block type="info" @click="onDraft" style="width: 95%;margin: 0.32rem auto;" v-if="info.id <= 0"
            color="linear-gradient( 90deg, #4A89EC 0%, #1261E2 100%)">暂存草稿</van-button>
        <van-popup v-model="showExaplePopup" :style="{ width: '80%' }">
            <div class="popup_example">
                <img :src="example.content" alt="">
                <div>{{ example.tip_msg }}</div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { getOssParams, uploadImage, uploadDelete, getExampleList } from '@/api/upload';
import { OCR_RECOGNIZE, CACHE_COMMIT, CACHE_INFO } from '@/api/mine';
import { setImageUrl, getImageUrl } from '@/api/upload'; // Adjust the path accordingly
export default ({
    props: ['info'],
    data() {
        return {
            name: "",
            credit_code: "",
            email: "",
            contacts: "",
            phone: "",
            license_url: [],
            qualification_url: [],
            authorization_url: [],
            business_license: {},
            example: "",
            exampleSrc: "",
            showExaplePopup: false,
            business_scope: ""
        }
    },
    mounted() {
            
        if (this.info.id <= 0) {
            let params = {
                type: 'shop',
                key: 'shopInfo',

            }
            this.$http.get(CACHE_INFO, { params: params }).then(res => {
                if (res.data.content != '') {
                    const data = JSON.parse(res.data.content);
                    // 回显数据
                    this.name = data.name;
                    this.email = data.email;
                    this.contacts = data.contacts;
                    this.phone = data.phone;
                    this.credit_code = data.business_license.credit_code
                    this.business_license = data.business_license
                    this.business_scope = data.business_scope
                    this.license_url = setImageUrl(data.business_license.license_url)
                    this.qualification_url = setImageUrl(data.qualification_url)
                    this.authorization_url = setImageUrl(data.authorization_url)
                }
            })
        } else {
            // setTimeout(()=>{
            // console.log(this.info);
            this.name = this.info.name;
            this.email = this.info.email;
            this.contacts = this.info.contacts;
            this.phone = this.info.phone;
            this.credit_code = this.info.business_license.credit_code
            this.business_license = this.info.business_license
            this.business_scope = this.info.business_license.business_scope
            this.license_url = this.info.business_license.license_url == '' ? [] : [{ url: this.info.business_license.license_url }]
            this.qualification_url = this.info.image_data.qualification_url == '' ? [] : [{ url: this.info.image_data.qualification_url }]
            this.authorization_url = this.info.image_data.authorization_url == '' ? [] : [{ url: this.info.image_data.authorization_url }]
            // },1000)
        }

    },
    methods: {
        async getExample(key) {
            this.example = await getExampleList(this.$http, key)
            this.showExaplePopup = true
        },
        // 上传营业执照
        async afterReadLicense(file) {
            try {
                // 获取OSS上传参数
                if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
                    this.ossParams = await getOssParams(this.$http, this.$http);
                }
                if (!this.ossParams) {
                    throw new Error('OSS参数未正确设置');
                }
                // 调用封装的上传函数
                await uploadImage(file, this.ossParams, this.license_url);
                let params = {
                    type: 'business_license',
                    image_url: this.license_url.map(item => item.url)[0]
                }
                this.$http.post(OCR_RECOGNIZE, params).then(res => {
                    // console.log(res);
                    this.business_license = res.data.business_license
                    this.credit_code = res.data.business_license.credit_code
                    this.business_scope = res.data.business_license.business_scope
                })
            } catch (error) {
                console.error('处理上传错误:', error);
            }
        },
        // 删除营业执照
        uploadDleteLicense(file) {
            this.license_url = uploadDelete(file, this.license_url);
            this.business_license = {}
        },
        // 经营资质
        async afterReadQualification(file) {
            try {
                // 获取OSS上传参数
                if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
                    this.ossParams = await getOssParams(this.$http);
                }
                if (!this.ossParams) {
                    throw new Error('OSS参数未正确设置');
                }
                // 调用封装的上传函数
                await uploadImage(file, this.ossParams, this.qualification_url);
                // console.log(this.qualification_url);

            } catch (error) {
                console.error('处理上传错误:', error);
            }

        },
        // 删除经营资质
        uploadDleteQualification(file) {
            this.qualification_url = uploadDelete(file, this.qualification_url);
        },
        // 授权书
        async afterReadAuth(file) {
            try {
                // 获取OSS上传参数
                if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
                    this.ossParams = await getOssParams(this.$http);
                }
                if (!this.ossParams) {
                    throw new Error('OSS参数未正确设置');
                }
                // 调用封装的上传函数
                await uploadImage(file, this.ossParams, this.authorization_url);
            } catch (error) {
                console.error('处理上传错误:', error);
            }
        },
        // 删除授权书
        uploadDleteAuth(file) {
            this.authorization_url = uploadDelete(file, this.authorization_url);
        },
        onSubmit(values) {
            let data = {
                ...this.business_license,
                business_scope: this.business_scope
            }
            let params = {
                name: this.name,
                email: this.email,
                contacts: this.contacts,
                phone: this.phone,
                business_license: {
                    ...this.business_license,
                    credit_code: this.credit_code,
                    license_url: getImageUrl(this.license_url),
                },
                business_scope: this.business_scope,
                license_url: getImageUrl(this.license_url),
                qualification_url: getImageUrl(this.qualification_url),
                authorization_url: getImageUrl(this.authorization_url)
            }
            let datas = {
                type: 'shop',
                key: 'shopInfo',
                content: JSON.stringify(params)
            }
            if(this.info.id<=0){
            this.$http.post(CACHE_COMMIT, datas).then(res => {
                // this.$toast('暂存成功')
            })
        }
            this.$emit('shopInfo', values, data)
        },
        onDraft() {
            let params = {
                name: this.name,
                email: this.email,
                contacts: this.contacts,
                phone: this.phone,
                credit_code: this.credit_code,
                business_license: {
                    ...this.business_license,
                    credit_code: this.credit_code,
                    license_url: getImageUrl(this.license_url),
                },
                business_scope: this.business_scope,
                license_url: getImageUrl(this.license_url),
                qualification_url: getImageUrl(this.qualification_url),
                authorization_url: getImageUrl(this.authorization_url)
            }
            let data = {
                type: 'shop',
                key: 'shopInfo',
                content: JSON.stringify(params)
            }
            this.$http.post(CACHE_COMMIT, data).then(res => {
                this.$toast('暂存成功')
            })
        },
    },
})
</script>
<style scoped lang="scss">
.shop_info {
    padding-bottom: 1.4rem
}

::v-deep .van-cell {
    background: transparent;

}

// .shop_upload {
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     padding: 0.2rem;

.shop_upload_text {
    // line-height: 0.5rem;
    line-height: .6rem;
    text-align: left;
    font-style: normal;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;

    div:nth-child(1) {
        // font-weight: 400;
        font-size: .28rem;
        color: #333333;

    }

    div:nth-child(2) {
        font-size: .24rem;
        color: #999999;
    }

    div:nth-child(3) {
        font-size: 0.24rem;
        color: #F9301B;
    }
}

.shop_upload_img {
    width: .64rem;
    height: .64rem;
    margin-top: 70%;
}

.popup_example {
    padding-bottom: 0.2rem;

    img {
        width: 100%;
    }

    div {
        padding: 0 .12rem;
        box-sizing: border-box;
        font-size: 0.28rem;
    }

}
</style>
